<template>
  <!-- 采购单详情编辑表 -->
  <div>
    <!--信息单 -->
    <div>
      <el-row>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item
            index="1"
            style="font-size: 20px; font: blod; color: black"
            >采购单详情</el-menu-item
          >
          <span class="but">
            <el-button plain icon="el-icon-s-order" @click="send"
              >提交</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-top-left"
              @click="backtrack()"
              >返回</el-button
            >
          </span>
        </el-menu>
        <span>
          <font style="font-size: 15px; margin-left: 20px">基本信息</font>
        </span>
      </el-row>

      <el-form
        :inline="true"
        :model="formLabelAlign"
        label-position="left"
        label-width="90px"
      >
        <el-row>
          <el-col :span="7">
            <el-form-item label="产品线：">
              <el-select v-model="dictvalue.productLine" placeholder="请选择">
                <el-option
                  v-for="item in productLines"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                  <span style="float: left">{{ item.label }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="7" :offset="1">
            <el-form-item label="客户：">
              <el-input v-model="formLabelAlign.customer" :disabled="true"  />
            </el-form-item>
          </el-col>

          <el-col :span="7" :offset="1">
            <el-form-item label="仓库：">
              <el-select v-model="dictvalue.warehouse" placeholder="请选择">
                <el-option
                  v-for="item in warehouses"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                  <span style="float: left">{{ item.label }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="制单人：">
              <el-input v-model="formLabelAlign.makPeople" :disabled="true"/>
            </el-form-item>
          </el-col>

          <el-col :span="7" :offset="1">
            <el-form-item label="审核人：">
              <el-input v-model="formLabelAlign.audit" :disabled="true"  />
            </el-form-item>
          </el-col>

          <el-col :span="7" :offset="1">
            <el-form-item label="成色：">
              <el-select
                v-model="dictvalue.condition"
                placeholder="请选择"
                :disabled="true"
              >
                <el-option
                  v-for="item in conditions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                  <span style="float: left">{{ item.label }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="7">
            <el-form-item label="制单时间：">
              <el-input v-model="formLabelAlign.createdTime" :disabled="true"  />
            </el-form-item>
          </el-col>

          <el-col :span="7" :offset="1">
            <el-table-column
              label="状态"
              align="center"
              width="150"
              prop="status"
            >
            </el-table-column>
          </el-col>

          <el-col :span="7" :offset="1">
            <el-form-item label="单号：">
              <el-input v-model="formLabelAlign.orderNo" :disabled="true"  />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="purchaseOrderGoodsId" label="产品id" width="120">
        </el-table-column>
        <el-table-column prop="goodsCode" label="产品编码" width="120">
        </el-table-column>
        <el-table-column
          prop="goodsName"
          label="产品名称"
          show-overflow-tooltip
        />
        <el-table-column
          prop="supplier"
          label="供应商"
          width="200"
          align="center"
        />
        <el-table-column label="克重范围" width="200" align="center">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.weightStart"
              style="width: 50px"
              :disabled="true"
            />
            ~
            <el-input
              v-model="scope.row.weightEnd"
              style="width: 50px"
              :disabled="true"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="purWeight"
          label="重量"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="purNums" label="数量" width="100" align="center">
        </el-table-column>
        <el-table-column
          prop="craft"
          label="克效果工艺"
          width="100"
          align="center"
        />
        <el-table-column
          prop="specification"
          label="规格"
          width="100"
          align="center"
        />
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="1"
        :page-sizes="[10, 20, 30]"
        :page-size="10"
        :total="80"
        style="float: right"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import purchaseOrderGoods from "@/api/needManager/PurchaseOrderGoods";
import purchaseOrderGoodsEdit from "@/api/needManager/PurchaseOrderGoodsEdit";
export default {
  data() {
    return {
      value: "",
      formLabelAlign: {},
      tableData: [],
      // 需求单对象
      requisitionForm: {
        // 基本信息对象
        basicInfo: {},
        // 产品信息对象
        goodsInfo: {},
        pageNum: 1,
        pageSize: 10,
      },
      //采购单id
      purchaseOrderId: null,
      //拆的对象
      splitGoodsIds: {
        purchaseOrderId: null,
        purchaseOrderGoodsIds: [],
      },
      //封装搜索条件
      queryPageBean: {
        currentPage: 1,
        pageSize: 10,
        queryString: "",
        startDate: "",
        endDate: "",
      },
      //绑定字典对象
      dictvalue: {
        productLine: "",
        warehouse: "",
        condition: "",
      },
      productLines: [
        {
          value: "1",
          label: "A产品线",
        },
        {
          value: "2",
          label: "B产品线",
        },
        {
          value: "3",
          label: "C产品线",
        },
        {
          value: "4",
          label: "D产品线",
        },
      ],
      warehouses: [
        {
          value: "1",
          label: "A仓库",
        },
        {
          value: "2",
          label: "B仓库",
        },
        {
          value: "3",
          label: "C仓库",
        },
      ],
      conditions: [
        {
          value: "1",
          label: "千足金999",
        },
        {
          value: "2",
          label: "万足金9999",
        },
      ],
      //产品线和仓库的封装对象
      goodsxo: {
        purchaseOrderId: null,
        x1: null,
        x2: null,
      },
      selection: [],
    };
  },
  created() {
    //获取需求单基本信息
    this.getData();
    //分页查询需求单对应商品信息
    this.getGoods();
  },
  methods: {
    getData() {
      let x = this.$route.query.purchaseOrderId;
      this.purchaseOrderId = x;
      purchaseOrderGoods.getPurchaseOrderGoodsEditData(x).then((res) => {
        this.formLabelAlign = res.data;
        //将返回的字典数据回显到选择框
        if (res.data.productLine == 1) {
          this.dictvalue.productLine = this.productLines[0].value;
        }
        if (res.data.productLine == 2) {
          this.dictvalue.productLine = this.productLines[1].value;
        }
        if (res.data.productLine == 3) {
          this.dictvalue.productLine = this.productLines[2].value;
        }
        if (res.data.productLine == 4) {
          this.dictvalue.productLine = this.productLines[3].value;
        }
        if (res.data.warehouse == 1) {
          this.dictvalue.warehouse = this.warehouses[0].value;
        }
        if (res.data.warehouse == 2) {
          this.dictvalue.warehouse = this.warehouses[1].value;
        }
        if (res.data.warehouse == 3) {
          this.dictvalue.warehouse = this.warehouses[2].value;
        }
        if (res.data.condition == 1) {
          this.dictvalue.condition = this.conditions[0].value;
        }
        if (res.data.condition == 2) {
          this.dictvalue.condition = this.conditions[1].value;
        }
      });
    },
    //分页获取对应商品信息
    getGoods() {
      this.queryPageBean.queryString = this.purchaseOrderId;
      purchaseOrderGoods.findPage(this.queryPageBean).then((res) => {
        this.tableData = res.data.rows;
      });
    },
    handleSelectionChange(val) {
      this.selection = val;
    },
    handleSelect(){
      
    },
    // 每页条数
    handleSizeChange(val) {
      this.queryPageBean.pageSize = val;
      this.getGoods();
    },
    //每页大小
    handleCurrentChange(val) {
      this.queryPageBean.currentPage = val;
      this.getGoods();
    },
    backtrack() {
      this.$router.push({ name: "purchase" });
    },
    //提交
    send() {
      this.goodsxo.x1 = this.dictvalue.productLine;
      this.goodsxo.x2 = this.dictvalue.warehouse;
      this.goodsxo.purchaseOrderId = this.purchaseOrderId;
      purchaseOrderGoodsEdit.insert(this.goodsxo).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "保存成功",
          });
          this.$router.push({ name: "purchase" });
        } else {
          this.$message({
            type: "error",
            message: "保存失败",
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.but {
  float: right;
}
</style>
